@charset "utf-8";
@import "../core/variables";
@import "../core/classes";

/**
 * Yo框架element基础构造
 -----------------------
 * Yo内置了包括按钮，输入框，单选，多选，区间，分值等基础元素
 *
 * @class element
 * @module Yo
 */

// 定义按钮的基础构造
// 使用方法请查看 yo-btn.scss
@mixin _btn {
    display: inline-block;
    overflow: hidden;
    width: map-get($btn, width);
    height: map-get($btn, height);
    line-height: map-get($btn, line-height);
    padding: map-get($btn, padding);
    vertical-align: top;
    // 当边框厚度大于0时，才定义边框相关属性
    @if map-get($btn, border-width) != null and
        map-get($btn, border-width) != 0 {
        border-width: map-get($btn, border-width);
        border-style: solid;
        border-color: map-get($btn, bordercolor);
    } @else {
        // 当使用input和button时，默认有巨丑边框，需清除
        border-style: none;
    }
    @include border-radius(map-get($btn, radius));
    background-color: map-get($btn, bgcolor);
    color: map-get($btn, color);
    text-align: center;
    cursor: pointer;
    &:active {
        // 当边框厚度大于0时，才定义边框相关属性
        @if map-get($btn, border-width) != null and
            map-get($btn, border-width) != 0 {
            border-color: map-get($btn, active-bordercolor);
        }
        background-color: map-get($btn, active-bgcolor);
        color: map-get($btn, active-color);
    }
    &-disabled {
        opacity: 1;
        cursor: not-allowed;
        &,
        &:focus,
        &:active {
            border-color: map-get($base, disabled-bordercolor);
            background-color: map-get($base, disabled-bgcolor);
            color: map-get($base, disabled-color);
        }
    }
}

// 定义输入框的基础构造
// 使用方法请查看 yo-input.scss
@mixin _input {
    &,
    &::-webkit-inner-spin-button {
        @include appearance;
    }
    width: map-get($input, width);
    height: map-get($input, height);
    padding: map-get($input, padding);
    border: 1px solid map-get($input, bordercolor);
    @include border-radius(map-get($input, radius));
    background-color: map-get($input, bgcolor);
    vertical-align: top;
    // 如果input颜色值与base相同，则不设置
    @if map-get($input, color) != map-get($base, color) {
        color: map-get($input, color);
    }
    &::-webkit-input-placeholder {
        color: map-get($input, placeholder-color);
    }
}

@mixin _loading {
    @include flexbox;
    @include fullscreen(map-get($z-index, loading));
    @include justify-content;
    @include align-items;
    background-color: map-get($loading, mask-bgcolor);
    line-height: 1;
    > .inner {
        display: block;
        text-align: center;
        padding: .1rem .2rem;
        @include border-radius(.05rem);
        background-color: map-get($loading, bgcolor);
        color: map-get($loading, color);
        font-size: map-get($loading, font-size);
        // 增加 .yo-ico 这一级用以fix某些浏览器不支持伪元素动画
        > .yo-ico {
            display: block;
            margin-bottom: .1rem;
            @include animation(rotate 1s infinite linear);
            @include transform-origin(center);
            &::before {
                content: map-get($loading, content);
                color: map-get($loading, ico-color);
                font-family: map-get($ico, font-name);
                font-size: map-get($loading, ico-size);
            }
        }
    }
}

// 定义区间选择的基础构造
// 使用方法请查看 yo-range.scss
@mixin _range {
    @include flexbox;
    line-height: 1;
    > input[type="range"] {
        @include appearance(none);
        @include flex;
        overflow: hidden;
        height: .28rem;
        background-image: -webkit-linear-gradient(right, map-get($range, outer-bgcolor) 0%, map-get($range, outer-bgcolor) 100%);
        background-image: linear-gradient(to right, map-get($range, outer-bgcolor) 0%, map-get($range, outer-bgcolor) 100%);
        background-size: 100% .04rem;
        background-repeat: no-repeat;
        background-position: center;
        &::-webkit-slider-thumb {
            @include appearance(none);
            @include square(.2rem);
            position: relative;
            border: 0;
            @include border-radius(50%);
            box-shadow: 0 0 2px rgba(0, 0, 0, .5), 1px 1px 5px rgba(0, 0, 0, .25);
            background-color: map-get($range, ball-color);
            &::before {
                position: absolute;
                top: .08rem;
                left: -2001px;
                width: 2000px;
                height: .04rem;
                background-color: map-get($range, inner-bgcolor);
                content: "\0020";
            }
        }
        &:disabled {
            opacity: .4;
            &::-webkit-slider-thumb::before {
                background-color: #444;
            }
        }
    }
    > .yo-ico {
        font-size: .2rem;
        &:first-child {
            margin-right: .1rem;
        }
        &:last-child {
            margin-left: .1rem;
        }
    }
}

// 定义checked的基础构造
// 使用方法请查看 yo-checked.scss
@mixin _checked {
    display: inline-block;
    position: relative;
    @include square(map-get($checked, size));
    font-size: map-get($checked, font-size);
    font-family: map-get($ico, font-name);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    > input,
    > .type {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        @include square(100%);
    }
    > input {
        z-index: 2;
        opacity: 0;
    }
    > .type {
        @include border-radius(map-get($checked, radius));
        background-color: transparent;
        // 当边框厚度大于0时，才定义边框相关属性
        @if map-get($checked, border-width) != null and
            map-get($checked, border-width) != 0 {
            border-width: map-get($checked, border-width);
            border-style: solid;
            border-color: map-get($checked, bordercolor);
            line-height: map-get($checked, size) - nth(map-get($checked, border-width), 1) * 2;
        } @else {
            line-height: map-get($checked, size);
        }
        &::after {
            content: map-get($checked, content);
            color: map-get($checked, color);
        }
    }
    > input:checked + .type {
        @if map-get($checked, border-width) != null and
            map-get($checked, border-width) != 0 {
            border-color: map-get($checked, on-bordercolor);
        }
        background-color: map-get($checked, on-bgcolor);
        &::after {
            color: map-get($checked, on-color);
        }
    }
    > input:disabled + .type {
        opacity: .4;
        @if map-get($checked, border-width) != null and
            map-get($checked, border-width) != 0 {
            border-color: map-get($base, disabled-bordercolor) !important;
        }
        background-color: map-get($base, disabled-bgcolor) !important;
        &::after {
            color: map-get($base, disabled-color) !important;
        }
    }
}

// 定义badge的基础构造
// 使用方法请查看 yo-badge.scss
@mixin _badge {
    display: inline-block;
    min-width: .16rem;
    min-height: .16rem;
    padding: map-get($badge, padding);
    // 当边框厚度大于0时，才定义边框相关属性
    @if map-get($badge, border-width) != null and
        map-get($badge, border-width) != 0 {
        border-width: map-get($badge, border-width);
        border-style: solid;
        border-color: map-get($badge, bordercolor);
    }
    @include border-radius(map-get($badge, radius));
    background-color: map-get($badge, bgcolor);
    color: map-get($badge, color);
    font-size: map-get($badge, font-size);
    @if map-get($badge, font-size) == null or
        map-get($badge, font-size) <= .14rem {
        line-height: .14rem;
    } @else {
        line-height: map-get($badge, font-size);
    }
    text-align: center;
}

// 定义loadtip的基础构造
// 使用方法请查看 yo-loadtip.scss
@mixin _loadtip {
    @include flexbox(inline);
    @include align-items;
    @include transform(rotatez(0));
    color: map-get($loadtip, color);
    font-size: map-get($loadtip, font-size);
    > .yo-ico {
        display: block;
        @include transform-origin(center);
        color: map-get($loadtip, ico-color);
        -webkit-transition: -webkit-transform .3s;
        transition: transform .3s;
        @include transform(rotatez(0deg));
        &-flip {
            @include transform(rotatez(180deg));
        }
    }
    > .yo-ico-loading {
        @include animation(rotate 1s infinite linear);
    }
    > .text {
        @include flex;
        margin-left: .1rem;
        > .time {
            display: block;
            font-size: .12rem;
        }
    }
}

// 定义score的基础构造
// 使用方法请查看 yo-score.scss
@mixin _score {
    position: relative;
    width: map-get($score, item-width) * 5;
    height: map-get($score, item-height);
    overflow: hidden;
    &,
    > .index {
        display: inline-block;
        background: url(#{map-get($setting, bgimg-domain)}#{map-get($score, url)}) repeat-x;
        @if map-get($score, item-height) != null {
            background-size: auto map-get($score, item-height) * 2;
        }
    }
    > .index {
        height: 100%;
        background-position: 0 -#{map-get($score, item-height)};
        line-height: 10;
        vertical-align: top;
    }
}